<template>
  <div class="wrap">
    <!-- 头部搜索 轮播 -->
    <header class="header" style="position: relative">
      <van-nav-bar title="妙手商场" />
      <div class="bosp" @click="$router.push('/shopss')">
        <van-search shape="round" placeholder="复方甘草算片" />
        <button class="btn" style="font-size: 30px;">搜索</button>
      </div>
      <button class="btn" style="font-size: 30px;">
        搜索
      </button>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width: 97%; height: 300px; border-radius: 35px; padding: 10px" />
        </van-swipe-item>
      </van-swipe>
      <div
        style="display: flex; margin-top: 20px;background-color: #fcf5e3; border-radius: 20px;height: 50px;line-height: 50px; justify-content: space-evenly;  ;">
        <div style="display: flex;">
          <span><van-icon name="diamond-o" style="font-size: 25px;color: #a36f36; margin-right: 7px;" /></span>
          <p style="color: #a36f36;font-weight: bolder;font-size: 22px;">正品保障
          </p>
        </div>
        <p style="color: #999;">|</p>
        <div style="display: flex;">
          <span><van-icon name="diamond-o" style="font-size: 25px;color: #a36f36; margin-right: 7px;" /></span>
          <p style="color: #a36f36; font-weight: bolder;font-size: 22px;">隐私发货
          </p>
        </div>
        <p style="color: #999;">|</p>
        <div style="display: flex;">
          <span><van-icon name="diamond-o" style="font-size: 25px;color: #a36f36; margin-right: 7px;" /></span>
          <p style="color: #a36f36; font-weight: bolder;font-size: 22px;">专业药师
          </p>
        </div>
        <p style="color: #999;">|</p>
        <div style="display: flex;">
          <span><van-icon name="diamond-o" style="font-size: 25px;color: #a36f36; margin-right: 7px;" /></span>
          <p style="color: #a36f36;font-weight: bolder;font-size: 22px;">官网直供
          </p>
        </div>
      </div>
    </header>
    <!-- 中间宫格轮播 -->
    <main class="man">
      <div class="grid3">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item>
            <div class="grid-item3">
              <dl>
                <dt>
                  <img src="../../img/延时_03.png" alt="">
                </dt>
                <dd>
                  延时持久
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/2222_03.png" alt="">
                </dt>
                <dd>
                  止脱生发
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/3333_03.png" alt="">
                </dt>
                <dd>
                  妇科炎症
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/4444_03.png" alt="">
                </dt>
                <dd>
                  平稳降压
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="..//../assets/shopimg/5555_03.png" alt="">
                </dt>
                <dd>
                  温控血糖
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../assets/shopimg/6666_07.png" alt="">

                </dt>
                <dd>
                  延时持久
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../img/延时_03.png" alt="">

                </dt>
                <dd>
                  延时持久
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="..//../assets/shopimg/5555_03.png" alt="">

                </dt>
                <dd>
                  缓解风湿
                </dd>
              </dl>
              <dl>
                <dt>
                  <img src="../../img/延时_03.png" alt="">

                </dt>
                <dd>
                  远离哮喘
                </dd>
              </dl>
              <dl @click="$router.push('/fl')">
                <dt>
                  <img src="../../assets/shopimg/5555_03.png" alt="">
                </dt>
                <dd>
                  全部分类
                </dd>
              </dl>
            </div>
          </van-swipe-item>
          <van-swipe-item class="grid-item3">
            <dl>
              <dt>
                <img src="../../assets/shopimg/w1_03.png" alt="">
              </dt>
              <dd>
                大牌器械
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/w2_03.png" alt="">
              </dt>
              <dd>
                缓解胃胀
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/w3_03.png" alt="">
              </dt>
              <dd>
                滋补调养
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/s4_03.png" alt="">
              </dt>
              <dd>
                母婴常备
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/w5_03.png" alt="">
              </dt>
              <dd>
                壮阳补肾
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e1_07.png" alt="">
              </dt>
              <dd>
                避孕专区
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e2_07.png" alt="">
              </dt>
              <dd>
                滋润保湿
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e3_07.png" alt="">
              </dt>
              <dd>
                营养充分
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e4_07.png" alt="">
              </dt>
              <dd>
                消化不良
              </dd>
            </dl>
            <dl>
              <dt>
                <img src="../../assets/shopimg/e5_06.png" alt="">
              </dt>
              <dd>
                花茶饮片
              </dd>
            </dl>
          </van-swipe-item>
        </van-swipe>
      </div>
    </main>
    <footer class="foote">
      <div>
        <h2 style="margin-left: 20px;">品牌专区<span class="span1" style="float: right;margin-right: 20px;"><img
              src="../../assets/shopimg/向右.png" alt="" style="width: 30px;height: 30px;"> </span></h2>
        <div class="onebox">
          <div class="onee">
            <img src="../../assets/img/z1_03.png" alt="">
          </div>
          <div class="onee">
            <img src="../../assets/img/z2_05.png" alt="">
          </div>
          <div class="onee">
            <img src="../../assets/img/z3_07.png" alt="">
          </div>
          <div class="onee">
            <img src="../../assets/img/z4_09.png" alt="">
          </div>
        </div>

      </div>
    </footer>

    <div>
      <ShopvirtualList :items="items" :itemHeight="30" :itemComponent="ItemComponent">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="goodslist">
            <div class="goods" v-for="(item, index) in tabgoods" :key="index" @click="todetail(item.shop_spu_id)">
              <div>
                <img :src="item.image" alt="" />
              </div>
              <div class="msg">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="prii">￥{{ item.price }}</div>
              </div>
            </div>
          </div>
        </van-list>
      </ShopvirtualList>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import router from '@/router'
import "./index.css"


const tabgoods = ref<any[]>([])

const cursor = ref(1)
const page_size = ref(11)

const loading = ref(false);
const finished = ref(false);

const onLoad = async () => {

  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  cursor.value += 1
  const res = await axios.get(`/v1/mall/home/shop_spu/content_config/`, { params: { cursor: cursor.value, page_size: page_size.value } })
  setTimeout(() => {
    tabgoods.value = [...tabgoods.value, ...res.data.data.content_list]

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (tabgoods.value.length >= 80) {
      finished.value = true;
    }
  }, 1000);
};

const images = [
  'https://img0.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427',
  'https://img0.baidu.com/it/u=904623622,17335413&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  'https://img1.baidu.com/it/u=1854147766,908152369&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800',
]

const getshoplist = async () => {
  const res = await axios.get(`/v1/mall/home/shop_spu/content_config/`, { params: { cursor: cursor.value, page_size: page_size.value } })
  tabgoods.value = res.data.data.content_list
}
const todetail = (id: number) => {
  router.push({ path: '/shopdetail/index.vue', query: { id: id } })
}
// todetail()
onMounted(() => {
  getshoplist()
})

const grid = ref([])
// 获取宫格数据
const getgrid = async () => {
  const res = await axios.get('/v1/mall/goods/category/info/')
  console.log(res.data.data.goods_category);

  grid.value = res.data.data.goods_category
}
getgrid()


const items = Array.from({ length: 10000 }, (v, k) => ({
  id: k,
  name: `Item ${k + 1}`,
}));

const ItemComponent = {
  template: '<div class="custom-item"><slot></slot></div>',
};
</script>
